<script setup lang="ts">
import { useRouter } from 'vue-router'
// import { ref, watch } from 'vue'
const router = useRouter()

// 导入pinia方法
// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'

// 获取pinia实例内容
const Ordersdata = FilmDataObj()

const { PayForTheOrder } = Ordersdata

const user = localStorage.getItem('token2')
console.log(user)

const orderList = JSON.parse(localStorage.getItem(`${user}`))?.reverse() || []
orderList.value = orderList.value
console.log(orderList)

const goDetail = (order: object) => {
  if (order.isPay) {
    PayForTheOrder(order)

    router.push({ path: '/completedorder', query: { Tip: '订单详情' } })
  } else {
    // console.log(order)
    PayForTheOrder(order)
    router.push('/unpaidorders')
  }
}
</script>
<template>
  <div class="order">
    <header>
      <van-icon name="arrow-left" color="#000" size="24" @click="$router.back()" />
      <div class="title">我的订单</div>
    </header>

    <div class="public" v-for="order in orderList" :key="order.CinemaId" @click="goDetail(order)">
      <div class="vote">
        <div>
          <van-image width="70rem" height="100rem" fit="cover" radius="8rem" :src="order.img" />
        </div>
        <div class="vote-info">
          <div class="nm">{{ order.name }}</div>
          <div class="time">{{ order.dateinf }}</div>
          <div class="cinema">{{ order.CMname }}</div>
          <div class="sit">
            {{ order.lobbySeats }} <span v-for="item in order.Seat">{{ item }}&nbsp;</span>
          </div>
          <div class="count">{{ order.Seat.length }}张 原价￥{{ order.price }}</div>
        </div>
        <div class="isPay">{{ order.isPay ? '查看订单' : '付款' }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.order {
  background: linear-gradient(to bottom, #f8d9d6, #fff);
  height: 100vh;

  header {
    display: flex;
    align-items: center;
    padding: 12rem 6rem;

    .title {
      width: 90%;
      text-align: center;
      font-size: 14rem;
      font-weight: bold;
    }
  }

  .public {
    width: 94%;
    margin: auto;
    margin-top: 8rem;
    background: #fff;
    border-radius: 12rem;
  }

  .vote {
    padding: 12rem;
    display: flex;
        align-items: center;

    .vote-info {
      margin-left: 8rem;
      font-size: 12rem;
      color: #adadad;
      line-height: 24rem;
            width: 60%;

      .nm {
        font-size: 14rem;
        color: #000;
        font-weight: 600;
      }

      .time {
        color: #383838;
        font-weight: 600;
      }
    }

    .service {
      display: flex;
      font-size: 12rem;
      align-items: center;

      span {
        margin-left: 4rem;
        color: #bbbbbb;
      }
    }

    .detail {
      color: #8e8e8e;
      font-size: 12rem;
      margin-right: 12rem;
    }
  }
}
.isPay{
      background-color: #e54847;
      font-size: 12rem;
      width: 60rem;
      height: 30rem;
      line-height: 30rem;
      border-radius: 20rem;
      color: #fff;
      padding: 0 4rem;
      text-align: center;
    }
</style>